import React, { Component } from 'react'

export default class Header extends Component {
  state = {
    content: '',
  }
  // 转为受控组件
  contentChange = (e) => {
    this.setState({
      content: e.target.value.trim(),
    })
  }
  // 增加todo keydown===13
  sendComment = (e) => {
    if (e.keyCode === 13)
      // 实现从app传来的增加todo方法
      this.props.addComment(this.state.content)
    this.setState({
      content: '',
    })
  }
  render() {
    const { content } = this.state
    return (
      <header className="header">
        <h1>todos</h1>
        <input
          value={content}
          onKeyDown={(e) => this.sendComment(e)}
          onChange={this.contentChange}
          className="new-todo"
          placeholder="What needs to be done?"
          autoFocus
        />
      </header>
    )
  }
}
